---
title: Next.js
description: Nestejs-spesifikke lint-regler for Ultracite.
---

The Next.js configuration has Next.js-specific linting rules for image optimization, document structure, and App Router patterns.

## Installasjon

Add the Next.js configuration to your `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Oversikt

This configuration adds rules specific to Next.js development:

- **Image-optimalisering**: Påse bruk av Next.js `<Image>`-komponenten
- **Dokumentstruktur**: Forhindre feil bruk av Next.js-spesielle komponenter
- **Klientkomponenter**: Sørg for at asynkrone klientkomponenter håndteres korrekt
- **Konfigurasjonsfiler**: Spesiell håndtering for `next.config.*`-filer

## Next.js-spesifikke regler

### Eksperimentell

| Regel | Innstilling | Beskrivelse |
|------|---------|-------------|
| `noNextAsyncClientComponent` | `error` | Forhindre asynkrone klientkomponenter i Next.js. Klientkomponenter bør være synkrone; bruk serverkomponenter for asynkrone operasjoner. |

### Ytelse

| Regel | Innstilling | Beskrivelse |
|------|---------|-------------|
| `noImgElement` | `error` | Ikke tillat bruk av `<img>` HTML-elementet. Bruk Next.js `<Image>`-komponenten i stedet for automatisk bildeoptimalisering. |

### Stil

| Regel | Innstilling | Beskrivelse |
|------|---------|-------------|
| `noHeadElement` | `error` | Ikke tillat bruk av `<head>` HTML-elementet. Bruk Next.js `next/head` eller App Router metadata-API i stedet. |

### Mistenkelige

| Regel | Innstilling | Beskrivelse |
|------|---------|-------------|
| `noDocumentImportInPage` | `error` | Forhindre import av `next/document` i sidefiler. `_document.tsx` skal kun eksistere i `pages/_document.tsx`. |
| `noHeadImportInDocument` | `error` | Forhindre import av `next/head` i `_document.tsx`. Bruk `<Head>` fra `next/document` i stedet. |

## Overstyringer for konfigurasjonsfiler

The Next.js preset includes special handling for configuration files and App Router components:

### Next.js-konfigurasjonsfiler

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Dette tillater Next.js-konfigurasjonsmønstre som kanskje vanligvis ikke ville passere lint-regler.

### App Router-sider og layouter

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

App Router-side- og layout-komponenter kan være asynkrone uten å kreve `await`, ettersom Next.js håndterer disse spesielt for server-side rendering og datainnhenting.